.fx-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: $border-radius-default;
  margin-right: 10px;

  &.light {
    background-color: $color-white !important;
  }

  &.large {
    height: $height-large;
    line-height: calc(#{$height-large} - 2px);
  }

  &.middle {
    height: $height-middle;
    line-height: calc(#{$height-middle} - 2px);
  }

  &.default {
    height: $height-default;
    line-height: calc(#{$height-default} - 2px);
  }

  &.mini {
    height: $height-mini;
    line-height: calc(#{$height-mini} - 2px);
  }

  &.primary {
    border-color: $color-primary;
    background-color: $color-primary-1;
    color: $color-primary;

    &.dark {
      background-color: $color-primary;
      color: $color-white;
    }

    > .close:hover {
      background-color: $color-primary;
      color: $color-white;
    }
  }

  &.success {
    border-color: $color-success;
    background-color: $color-success-1;
    color: $color-success;

    &.dark {
      background-color: $color-success;
      color: $color-white;
    }

    > .close:hover {
      background-color: $color-success;
      color: $color-white;
    }
  }

  &.warning {
    border-color: $color-warning;
    background-color: $color-warning-1;
    color: $color-warning;

    &.dark {
      background-color: $color-warning;
      color: $color-white;
    }

    > .close:hover {
      background-color: $color-warning;
      color: $color-white;
    }
  }

  &.error {
    border-color: $color-error;
    background-color: $color-error-1;
    color: $color-error;

    &.dark {
      background-color: $color-error;
      color: $color-white;
    }

    > .close:hover {
      background-color: $color-error;
      color: $color-white;
    }
  }

  > .content {
    max-width: 200px;
    @extend .text_hide;
  }

  > .close {
    width: 14px;
    height: 14px;
    line-height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;

    > i {
      transform-origin: center center;
      transform: scale(0.7);
    }
  }
}
